/*

 相关概念

 一个css像素被多少个物理像素渲染. 取决于设备独立像素
 
 像素比(dpr): 屏幕分辨率的宽度 / 设备独立像素的宽度(dpi/ppi) 

 图片高清显示: 
 位图和矢量图的区别: 位图会失真,矢量图不会失真
 位图为什么会失真? 一个位图是由位图像素组成,当一个位图像素被多个物理像素渲染.则位图会失真
 实际开发中,高清屏上展示的位图会失真.解决的办法?
 在像素比为2的屏幕上,使用2倍图, 在像素比为3的屏幕上,使用3倍图

 视口: 
 布局视口 980  布局视口影响布局
 视觉视口 980  视觉视口不影响布局
 理想视口 是为了修改布局视口 
 开启理想视口: 
    <meta name="viewport" content="width=device-width, initial-scale=1" />

 width的取值: 
 1. device-width 代表的是设备独立像素宽度
 2. 数字 但是有兼容性问题

 initial-scale = 1
 scale = 设备独立像素宽度 / 布局视口宽度





















*/
